<!-- 回款列表-回款详情  -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="returned-detail">
      <TitleBox title="基本信息"></TitleBox>
      <div class="base">
        <a-form :model="form" :rules="rules" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="orderCode"
                label="订单编号"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.number"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="contractCode"
                label="合同编号"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.contractNumber"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="clientName"
                label="客户名称"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.clientCompanyName"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="clientLevel"
                label="客户级别"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.clientLevel"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="contactName"
                label="联系人"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.customerName"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :show-colon="true" field="phone" label="联系电话">
                <a-input
                  disabled
                  size="large"
                  v-model="form.customerPhone"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="bussinessManager"
                label="业务经理"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.userStaffName"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="contractMoney"
                label="订单总金额"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.totalPrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="frontMoney"
                label="累计回款金额"
              >
                <a-input-number
                  disabled
                  size="large"
                  v-model="form.accumulatedCollectionPrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input-number>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="frontMoney"
                label="未回款金额"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.waitCollectionPrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item :show-colon="true" field="remark" label="付款方式:">
                <a-textarea
                  :style="{
                    width: '100%',
                  }"
                  disabled
                  size="large"
                  v-model="form.payMode"
                  allow-clear
                  :auto-size="{
                    minRows: 5,
                  }"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="AccuReturnedMoney"
                label="已开票金额"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.invoicablePrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="noReturnedMoney"
                label="可开票金额"
              >
                <a-input
                  disabled
                  size="large"
                  v-model="form.invoicedPrice"
                  allow-clear
                >
                  <template #append> 人民币 </template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <TitleBox title="客户发票信息"></TitleBox>
      <div class="base">
        <a-form :model="form" :rules="rules" auto-label-width>
          <a-row style="margin-top: 20px" :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="accountName"
                label="单位抬头"
              >
                <a-input
                  placeholder="请填写账号"
                  size="large"
                  v-model="formList.companyTitle"
                  allow-clear
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="account"
                label="纳税人识别号"
              >
                <a-input
                  placeholder="请填写账号"
                  size="large"
                  v-model="formList.ein"
                  allow-clear
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                :show-colon="true"
                field="accountName"
                label="开户行"
              >
                <a-input
                  placeholder="请填写账号"
                  size="large"
                  v-model="formList.accountBank"
                  allow-clear
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :show-colon="true" field="account" label="单位地址">
                <a-input
                  placeholder="请填写账号"
                  size="large"
                  v-model="formList.companyAddress"
                  allow-clear
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs type="card-gutter">
        <a-tab-pane
          v-for="item in data"
          default-active-key="1"
          :key="item.key"
          :title="item.title"
          v-model="tabsVal"
        >
          <!-- 主要内容 -->
          <div>
            <returnedRecord
              v-if="item.key === '1'"
              :form="returnedRecordEditData"
            />
          </div>
          <!-- 主要内容 -->
          <div>
            <Invoicerecord v-if="item.key === '2'" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    watchEffect,
    defineAsyncComponent,
    onMounted,
    provide,
    nextTick,
  } from 'vue';
  import { useRoute } from 'vue-router';
  import { GetClientOrderDetail } from '@/api/order-management/client-order/index';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list/index';
  import { useOrderStore } from '@/store';
  import * as apiList from '@/api/order-management/returned-management/base-setting';
  import miiter from '@/utils/mitt';
  import returnedRecord from './components/returned-record-table/index.vue';
  import Invoicerecord from './components/Invoice-record-table/index.vue';

  const orderInfoData = useOrderStore();
  const returnedRecordEditData = ref();
  const tabsVal = ref();
  const route = useRoute();
  const title = '回款详情';
  const breadCrumb = ['订单管理', '回款管理', '回款列表', '回款详情'];
  const isReturnedVisible = ref(false);
  const isInvoiceVisible = ref(false);
  // const record = Number(route.query.record);
  let form = ref<any>({});
  const getOrderId = ref();
  const formList = reactive({
    companyTitle: '', //公司抬头
    ein: undefined, //税号
    accountBank: '', //开户省市
    companyAddress: '', //公司地址
  });
  const clientId = ref(); //存储客户id

  const data = ref([
    {
      key: '1',
      title: '回款记录',
    },
    {
      key: '2',
      title: '发票记录',
    },
  ]);

  const formContent = Object.keys(formList);

  const getCustomerInfo = async (id: number) => {
    const res = await GetClientDetailTabs({ id, typeId: 1 });
    for (let i in res) {
      if (formContent.includes(i)) {
        formList[i] = res[i];
      }
    }
  };

  const getData = async (id: number) => {
    const res = await GetClientOrderDetail({ id });
    form.value = res;
    getCustomerInfo(res.clientCompanyId);
    orderInfoData.orderInfo = form.value;
  };

  watchEffect(() => {
    if (route.query.id) {
      getData(Number(route.query.id));
    }
  });
</script>

<style scoped lang="less">
  .returned-detail {
    padding: 10px 40px;
    .base {
      margin-top: 20px;
      padding: 0 30px;
    }
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-input[disabled]) {
    -webkit-text-fill-color: black;
  }
</style>
